// 组件不可以染指数据请求，页面级别组件中看不到api
// 在 action 中，redux 指定可以数据流动开始的地方  
// redux 之后，UI 更纯粹  
// 应用开发分成 UI + 数据管理  

import { getBannerRequest,getRankRequest, getSingerRequest } from "../api/request"

// store reduce defaultState -> action api -> reducer 重新计算 
// -> 通知connect UI /更新
// action 函数
export const changeBannerList = (data) => ({
    type:'CHANGE_BANNER',
    data
})
export const getBannerList = () => {
    return (dispatch) => {
        getBannerRequest().then(data => {
            const action = changeBannerList(data.banners)
            dispatch(action)
        })
    }
}

// 固定格式：{type:'修改标记',data}
export const changeRankList = (data) => ({
    type:'CHANGE_RANKLIST',
    data
})

export const getRankList = () => {
    // api 异步
    return (dispatch) => {
        getRankRequest().then(data => {
            // console.log(data,dispatch)
            const action = changeRankList(data.list)
            // console.log(action)
            // dispatch 这种格式的对象，才能触发reducer重新计算
            dispatch(action)
        })
    }
}

export const changeSingerList = (data) => ({
    type:'CHANGE_SINGERLIST',
    data
})

export const getSingerList = () => {
    return (dispatch) => {
        getSingerRequest().then(data => {
            // console.log(data,dispatch)
            const action = changeSingerList(data.artists)
            dispatch(action)
        })
    }
}